<!--
 * @Author: ningjz
 * @Date: 2022-03-25 11:30:00
 * @Description: 基本情况-弹窗数据
-->

<template>
  <div class="box">
    <div class="box-close" @click="handClose">
      <el-icon><close /></el-icon>
    </div>
    <div class="box-con">
      <div class="con-item">
        <p class="item-con con-til">分类名称</p>
        <p class="item-con con-nav">分类内容</p>
      </div>
      <div class="con-item" v-for="(item, index) in tableData" :key="index">
        <p class="item-con con-til">{{ item.name }}</p>
        <p class="item-con con-nav">{{ item.value }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Close } from '@element-plus/icons-vue'
export default {
  components: {
    Close
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props, { emit }) {
    const handClose = () => {
      emit('close')
    }
    return {
      handClose
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  width: 100%;
  margin: 7px 0px -23px 8px;
  padding: 45px 20px 20px 20px;
  background-size: 100% 100%;
  background: url('../../../assets/images/table-bg.png') no-repeat;
  position: relative;
  .box-close {
    cursor: pointer;
    position: absolute;
    right: 6px;
    top: 8px;
    font-size: 19px;
    color: #ccfdff;
    &:hover {
      color: #8ca8a8;
    }
  }
  .box-con {
    // background: url('../../../assets/images/M2/table-gb.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    .con-item {
      display: flex;
      height: 56.8px;
      margin-bottom: 3px;
      font-weight: 550;
      // color: #88e0ff;
      color: #1deeff;
      font-size: 18px;
      .item-con {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #153f7e;
      }
      &:nth-child(1) {
        color: #fff;
        .item-con {
          background-color: #0387cf;
        }
        .con-nav {
          background-color: #0387cf;
          justify-content: center;
        }
      }
      .con-til {
        width: 231px;
        // background: #ff712b;
      }
      .con-nav {
        margin-left: 3px;
        width: 825px;
        padding: 0px 25px;
        justify-content: flex-start;
        // background: #b45af3;
      }
    }
  }
}
</style>
